<!-- BaseDataTable -->
<script setup lang="ts">
import axios from 'axios'
import { ref, watch } from 'vue'
import { ElLoading } from 'element-plus'
import { useProjectStore } from "../stores/project";

const projectStore = useProjectStore()
const props = defineProps(['viewTitle', 'dataUrl', 'tableColumn'])
const tableData = ref([])
const initData = async () => {
  if (projectStore.id) {
    const loading = ElLoading.service({
      lock: true,
      text: '数据加载中……',
    });
    const res = await axios.get('/api' + props.dataUrl)
    tableData.value = res.data.list.filter((e: any) => e.projectId === projectStore.id)
    loading.close()
  }
}

initData()
watch(() => projectStore.id, () => {
  initData()
})

</script>
<template>
  <b>{{ viewTitle }}</b>
  <el-table :data="tableData" style="width: 100%">
    <template v-if="tableColumn">
      <el-table-column v-for="item in tableColumn" :key="item" :prop="item.prop" :label="item.label" :width="item.width">
        <template v-if="item.component" #default="scope">
          <component :is="item.component" v-bind="item.bind ? item.bind(scope) : null"></component>
        </template>
      </el-table-column>
    </template>
    <el-table-column label="" />
  </el-table>
</template>
<style scoped lang="scss"></style>